

// 1. 找到图片
let image = $('#image');
// 2. 剪裁配置项
let option = {
  // 设置剪裁的比例
  aspectRatio: 1,
  // 指定预览区
  preview: '.img-preview'
}
// 3. 调用cropper方法，实现初始的效果
image.cropper(option);


// ------------------------ 点击 上传 触发文件域的单击事件 --------------------------
$('button:contains("上传")').on('click', function () {
  $('#file').trigger('click');
})

// ------------------------ 选择了图片，更换剪裁区的图片 ----------------------------
//当选择了文件的时候会触发change事件
$('#file').on('change', function () {
  // 获取图片的url地址
  if (this.files.length > 0) {
    // 1. 找到文件对象
    // console.dir(this);
    let fileObj = this.files[0];
    // 2. 创建url
    let url = URL.createObjectURL(fileObj);
    // console.log(url);
    // 更换剪裁区的图片
    // image.cropper('destroy').attr('src', url).cropper(option);
    image.cropper('replace', url);
  }
})


// ------------------------- 完成更换 -------------------------------------------
// 点击 确定 按钮 --> 剪裁图片 --> 转换成base64格式 --> 提交给接口
$('button:contains("确定")').on('click', function () {
  // 剪裁图片
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
  // canvas有一套内置的API方法，属于JS原生语法（只有指定jpeg格式，才能指定图片质量这个参数）
  let base64 = canvas.toDataURL('image/jpeg', 0.3);
  // console.log(base64);

  axios.post('/my/user/avatar', `avatar=${encodeURIComponent(base64)}`).then(res => {
    let { status, message } = res.data;
    if (status === 0) {
      layer.msg(message);
      // 更换了头像，更新父页面（index.html)的头像
      window.parent.getUserInfo();
    }
  });
});

/* $('button:contains("确定")').on('click',function () {
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
  // canvas有一套内置的API方法，属于JS原生语法（只有指定jpeg格式，才能指定图片质量这个参数）
  let base64 = canvas.toDataURL('image/jpeg', 0.3);
  // console.log(base64);
  axios.post('/my/user/avatar',`avatar=${encodeURIComponent(base64)}`).then(res=>{
   console.log(res);
  })
}) */